<template>
	<book  v-for="info in infos" :info="info" :bookid="info.id" type="focus"></book>
	<span v-show="infos == {}">您还没有关注当前分类的文章</span>
</template>
<script>
	import {updateTitle} from './../vuex/action'
	import Book from './find/Book'
	import {getFocusBook, getBookList} from './../js/data'

	export default {
		props: [],
		vuex: {
			actions: {
				updateTitle
			},
			getters: {
				focusSelect: function (state) {
					return state.focusSelect
				},
				focusBook: state => state.book.focus
			}
		},
		methods: {
			test: function () {
				this.show = !this.show
			}
		},
		data: function () {
			return {
				show: false,
				infos: {}
			}
		},
		route: {
			// activate
			activate: function () {
				// console.log(123)
				let data = {
					science: '科幻',
					whodunit: '推理',
					workspace: '职场',
					love: '爱情',
					Supernatural: '灵异',
					literature: '文学'
				}
				this.updateTitle(data[this.focusSelect])
			}
		},
		watch: {
			'focusSelect': function (val) {
				if (this.focusBook.indexOf(this.focusSelect) > -1) {
					this.infos = getBookList(this.focusSelect)
					console.log(this.infos)
				} else {
					this.infos = {}
				}
			}
		},
		components: {
			Book
		},
		created: function () {
			this.infos = getFocusBook()
			let type = getFocusBook()
			if (type.indexOf(this.focusSelect) > -1) this.infos = getBookList(this.focusSelect)
		}
	}
</script>
<style>
	li {
		background-color: #ccc;
		/*margin: 5px 0;*/
	}
</style>